<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { HttpClientConfig, WebProxyConfig } from '../../services/client';
import NtmWebProxyConfigEditor from './NtmWebProxyConfigEditor.vue';
import ClusterConfigConstants from '../../constants/ClusterConfigConstants';

const model = defineModel<HttpClientConfig>({ required: true });
const modelValue = reactive(model.value);
watch(modelValue, (value) => {
    model.value = value
})

const initWebProxy = () => {
    modelValue.webProxy = new WebProxyConfig();
}
const removeWebProxy = () => {
    modelValue.webProxy = undefined;
}

const sslProtocols = ref(ClusterConfigConstants.HttpClient.SslProtocols());
</script>

<template>
    <ElFormItem>
        <ElSpace>
            <ElButton v-if="!modelValue.webProxy" @click="initWebProxy">Add WebProxy</ElButton>
        </ElSpace>
    </ElFormItem>

    <ElFormItem prop="sslProtocols" label="SSL Protocols">
        <ElSelect v-model="modelValue.sslProtocols" multiple>
            <ElOption v-for="(p, i) in sslProtocols" :key="i" :label="p.Label" :value="p.Value">
                {{ p.Label }}
            </ElOption>
        </ElSelect>
    </ElFormItem>

    <ElFormItem prop="maxConnectionsPerServer" label="Max Connections Per-Server">
        <ElInputNumber v-model="modelValue.maxConnectionsPerServer"></ElInputNumber>
    </ElFormItem>

    <ElFormItem prop="enableMultipleHttp2Connections" label="Enable Multiple Http2 Connections">
        <ElSwitch v-model="modelValue.enableMultipleHttp2Connections"></ElSwitch>
    </ElFormItem>

    <ElFormItem prop="requestHeaderEncoding" label="Request Header Encoding">
        <ElSelect v-model="modelValue.requestHeaderEncoding"></ElSelect>
    </ElFormItem>

    <ElFormItem prop="responseHeaderEncoding" label="Response Header Encoding">
        <ElSelect v-model="modelValue.responseHeaderEncoding"></ElSelect>
    </ElFormItem>

    <ElFormItem prop="webProxy" v-if="modelValue.webProxy">
        <template #label>
            <ElSpace>
                <ElText>Web Proxy</ElText>
                <ElButton size="small" type="danger" @click="removeWebProxy">移除</ElButton>
            </ElSpace>
        </template>
        <NtmWebProxyConfigEditor :column='1' v-model="modelValue.webProxy"></NtmWebProxyConfigEditor>
    </ElFormItem>

    <ElFormItem prop="dangerousAcceptAnyServerCertificate">
        <template #label>
            <ElText type="danger">（DANGEROUS）</ElText>
            <ElText>Accept Any Server Certificate</ElText>
        </template>
        <ElSwitch v-model="modelValue.dangerousAcceptAnyServerCertificate"></ElSwitch>
    </ElFormItem>
</template>